<template>
  <ul class="todo-list">
    <li v-for="item in showList" :key="item.id">
      <div class="view">
        <input
          class="toggle"
          type="checkbox"
          :checked="item.done"
          @change="changeDone(item.id)"
        />
        <label>{{ item.content }}</label>
        <button class="destroy" @click="delById(item.id)"></button>
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { Status, Todo } from '@/types'
import { defineProps, defineEmits, computed } from '@vue/runtime-core'
// 定义 Props 接收父组件传过来的数据
const props = defineProps<{ list: Todo[]; status: Status }>()
// 定义 Emits 接收父组件的自定义事件
// 💥 这里的格式化如何处理更合适，换行报错？
const emit = defineEmits<{(event: 'delById', id: number): void; (event: 'changeDone', id: number): void; }>()

// 根据 id 删除数据
const delById = (id: number) => emit('delById', id)
// 根据 id 更新完成状态
const changeDone = (id: number) => emit('changeDone', id)

const showList = computed(() => {
  if (props.status === 'all') {
    return props.list
  } else if (props.status === 'active') {
    return props.list.filter((v) => !v.done)
  } else {
    return props.list.filter((v) => v.done)
  }
})
</script>
